<template>
  <div class="vehicle-rental-map">
    <wallet-title :title="searchTitle" />
    <vehicle-order-map/>
    <!-- <vehicle-order-map :orderId="orderId" :trajectory="trajectory"/> -->
    <div class="container-map-top">
      <div class="container-map-top-box">
        <div class="rentalMap-left">
          <img :src="orderingCar.imgSrc" alt="">
          <div class="msg">
            <div>{{orderingCar.licenseNum}}</div>
            <div>{{orderingCar.name}}</div>
            <div>{{orderingCar.rentalPrice}}/分钟</div>
          </div>
        </div>
        <div class="rentalMap-right">
          <div>
            <div>租赁车辆时间：</div>
            <div>{{countTime0.d}}天 {{countTime0.h}}小时 {{countTime0.m}}分钟 {{countTime0.s}}秒</div>
          </div>
          <div>
            <div>预约车位时间：</div>
            <div>{{countTime.d}}天 {{countTime.h}}小时 {{countTime.m}}分钟 {{countTime.s}}秒</div>
          </div>
        </div>
      </div>
      <div class="huanche" @click="showMap">
        <div>还车地址：</div>
        <div>{{location}}</div>
      </div>
      <van-popup class="popup-huan" v-model="showPopHuan" position="right" closeable>
        <vehicle-map @acceptLocation="getLocation" />
      </van-popup>

      <div class="btn-box">
        <div class="voucher-box">
          <button :class="{'rental-now-box': isOverPackageFlag}" :disabled="false" @click="getVoucherDialog">上传凭证</button>
        </div>
        <!-- 停车位置以及停车位 -->
        <div class="rental-parking">
          <button v-if="yuyue" :class="{'rental-now-box': isOverPackageFlag}" :disabled="false" @click="getRentalParking">预约停车位</button>
          <button v-else :class="{'rental-now-box': isOverPackageFlag}" :disabled="false" @click="stopRentalParking">取消预约停车位</button>
        </div>

        <!-- 结束租车 -->
        <div class="rental-over">
          <button :class="{'rental-now-box': isOverPackageFlag}" :disabled="false" @click="getOverTime">结束用车</button>
        </div>
      </div>
      <!-- 上传图片检查车辆是否完整 -->
      <van-dialog class="order-dialog" v-model="showVoucher" title="上传还车凭证" @confirm="getVoucherList">
        <div class="voucher-dialog">
          <van-uploader v-model="fileList" name="myfiles" multiple max-count="4" />
        </div>
      </van-dialog>

      <van-dialog v-model="showSpace" message="当前已经预约停车位了，不能再预约了"></van-dialog>
      <van-dialog class="order-dialog" v-model="appointCarSpace" title="停车位">
        <div>一共有{{parkingList.length}}车位</div>
        <div class="parking">
          <div v-for="item in parkingList" :key="item.id">
            <button :disabled="item.parkingOccupyStatus==='0'"
            :class="{'parkingStatus': item.parkingOccupyStatus==='0'}"
            @click="getParkingNum(item)"
            >
            {{item.parkingNum}}
          </button>
          </div>
        </div>
      </van-dialog>

      <van-dialog class="order-dialog" v-model="isShowDialog" title="订单详情">
        <div class="dialog-box">
          <div class="dialog-time">花费时间：
            {{Math.floor(Math.floor(Math.floor(Math.round((spentTime*1000).toFixed(2)/1000)/60)/60)/24)}}天
            {{Math.floor(Math.floor(Math.round((spentTime*1000).toFixed(2)/1000)/60)/60)%24}}小时
            {{Math.floor(Math.round((spentTime*1000).toFixed(2)/1000)/60)%60}}分钟
            {{Math.round((spentTime*1000).toFixed(2)/1000)%60}}秒
          </div>
          <div class="dialog-money"> 时间费用：{{money}}元</div>
          <div class="dialog-appointment">预约停车费：{{appointment}}元</div>
          <div class="dialog-money">行程费用：{{distanceMoney}}元</div>
          <div class="dialog-total-money">总计费用：{{totalMoney}}元</div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { updateOrderLocation, getOrderList, getRentalParkingList, updateRentalParkingList, updateEndTime, updateCarList, updateSpaceData, getOrderingData, getPackageList, updateCarId, getSpaceStartTime, getSpaceEndTime, resetStartAppoint, updateSpaceAndCar, getDeposit, updateDeposit, updateOrderReturnLocation, handleMultiVoucher, updateAfterVoucher, updateCarDistance } from '../../../api';
import WalletTitle from '../../common/WalletTitle.vue';
import { mapState } from 'vuex';
import VehicleMap from './VehicleMap.vue';
import VehicleOrderMap from './VehicleOrderMap.vue';
import { formatDateTime } from '../Model/time.js';
import AMapLoader from '@amap/amap-jsapi-loader';
import { getDistance } from '../Model/getDistance';
window._AMapSecurityConfig = {
  securityJsCode: '237716e4a44b4c1b1e45e9280e7f189f'
}
export default {
  components: { WalletTitle, VehicleMap, VehicleOrderMap },
  props: {
    listData: Object
  },
  name: 'vehicleRentalMap',
  data() {
    return {
      searchTitle: '订单页面',
      isOverPackageFlag: true,
      startTime: null, // 开始租车时间
      overTime: null, // 结束租车时间
      spentTime: '', // 一共花费的时间
      packageList: [], // 套餐
      curIndex: 1, // 点击套餐对应的索引
      rentalData: {}, // 车辆对应的单价
      money: null, // 总价格
      appointment: 0, // 停车费
      parking: false, // 停车位
      showPopHuan: false, // 停车位置的弹框状态
      lnglat: [113.284218, 23.134583], // 还车地址经纬度
      location: '', // 还车地址
      parkingList: [], // 停车位数据
      parkingRentalStatus: 0, // 停车位是否可预约状态
      uploader: [], // 上传凭证
      showVoucher: false, // 凭证弹框
      isShowDialog: false,
      map: null,
      appointCarSpace: false, // 预约停车位弹框显示状态
      sec: 0,
      min: 0,
      cur30: null,
      timerInterval: null, // 预约停车位的定时器
      showSpace: false,
      orderingCar: [], // 当前订单对应的车辆
      spendPackageTime: 0, // 套餐里的时间
      price: null, // 套餐里的单价
      price2: null, // 套餐里的金额
      packageId: -1, // 停车位对应的id
      space: null, // 停车位编号
      totalMoney: null, // 最终价格
      startAppointTime: null, // 开始预约时间
      endAppointTime: null, // 结束预约时间
      yuyue: true, // 默认显示预约停车位
      deposit: 0, // 账户余额
      countTime: {
        d: 0,
        h: 0,// 定义时，分，秒，毫秒并初始化为0；
        m: 0,
        ms: 0,
        s: 0,
        time: 0,
        str: ''
      },
      countTime0: {
        d: 0,
        h: 0,// 定义时，分，秒，毫秒并初始化为0；
        m: 0,
        ms: 0,
        s: 0,
        time: 0,
        str: ''
      },
      trajectory: [], // 车辆行驶的轨迹信息
      orderId: 0, // 订单id
      fileList: [],
      distanceMoney: 0
    }
  },
  watch: {
    countTime: {
      handler(newVal, oldVal) {
        // console.log('旧值', oldVal);
        // console.log('新值', newVal);
      },
      deep: true
    }
  },
  mounted() {
    this.showCarMsg();
  },
  created() {
    this.getDefaultTime();
  },
  computed: {
    ...mapState([
      'stateRouteData',
      'stateCarMessage',
      'stateRentalId',
      'stateOrderStatus',
      'stateStartTime',
      'stateEndTime'
    ])
  },
  methods: {
    // 获取凭证弹框
    getVoucherDialog() {
      this.showVoucher = true;
    },
    // 获取上传的图片
    getVoucherList() {
      // let fileObject = [];
      if(this.fileList.length !== 0) {
        let myFormData = new FormData()
        this.fileList.forEach(item => {
          // fileObject.push(item.file.name);
          myFormData.append('myfiles', item.file.name)
        })

        getOrderList(this.$cookie.get('userId')).then(({data}) => {
          let orderId = data.data[0].id;
          handleMultiVoucher(myFormData).then(({data}) => {
            // console.log('解析成功', data.split(','))
            let arr = [];
            arr.push(data);
            updateAfterVoucher({
              "myfiles": `[${arr[0]}]`,
              "id": orderId
            }).then(res => {
            })
          })
        })
      }
    },
    // 一进入页面就显示的数据
    getDefaultTime() {
      updateOrderLocation({ // 拿到车辆数据
        "user_id": this.$cookie.get('userId')
      }).then(({data}) => {
      })
      getOrderList(this.$cookie.get('userId'), 0).then(({data}) => {
        if(data.data[0].startAppointTime !== null && data.data[0].startAppointTime !== "") {
          this.receipt(); // 一进入订单页面，如果当前已经预约过了则调用计时方法继续计时
          let intervalTime = Date.parse(formatDateTime(new Date().getTime())) - Date.parse(formatDateTime(data.data[0].startAppointTime));
          this.countTime.d = Math.floor(Math.floor(Math.floor(Math.round(intervalTime/1000)/60)/60)/24);
          this.countTime.h = Math.floor(Math.floor(Math.round(intervalTime/1000)/60)/60)%24;
          this.countTime.m = Math.floor(Math.round(intervalTime/1000)/60)%60;
          this.countTime.s = Math.round(intervalTime/1000)%60;
          this.yuyue = false; // 预约成功后将预约车位改为取消预约车位

          // 如果超过30min，则提醒要继续还是取消
          setInterval(() => {
            // 找到半小时前时间
            if(this.countTime.m === 25 && this.countTime.h === 0 && this.countTime.s === 0) {
              console.log('已经预约25分钟了，还剩5分钟');
              this.$dialog.confirm({
                message: '还有5分钟就要自动结束预约了,请问要续约吗?'
              }).then(() => {
                console.log('续约成功')
              }).catch(() => {
                console.log('取消续约')
                setInterval(() => {
                  if(this.countTime.m === 30 && this.countTime.h === 0 && this.countTime.s === 0) {
                    // 将订单表里面的开始预约车位时间清空
                    this.$dialog.alert({
                      message: '取消预约车位成功'
                    })
                    this.stopRentalParking();
                    this.yuyue = true;
                  }
                }, 1000)
              })
            }
          }, 1000)
        }

        if(data.data[0].startTime !== null && data.data[0].startTime !== "") {
          this.receipt2();
          let intervalTime0 = Date.parse(formatDateTime(new Date().getTime())) - Date.parse(formatDateTime(parseInt(data.data[0].startTime)*1000));
          this.countTime0.d = Math.floor(Math.floor(Math.floor(Math.round(intervalTime0/1000)/60)/60)/24);
          this.countTime0.h = Math.floor(Math.floor(Math.round(intervalTime0/1000)/60)/60)%24;
          this.countTime0.m = Math.floor(Math.round(intervalTime0/1000)/60)%60;
          this.countTime0.s = Math.round(intervalTime0/1000)%60;
        }
      })
    },
    // 取消预约车位
    stopRentalParking() {
      this.$dialog.confirm({
        message: '确定要取消续约吗?'
      }).then(() => {
        getOrderList(this.$cookie.get('userId'), 0).then(({data}) => {
          let carId = data.data[0].car_id;
          resetStartAppoint({
            "user_id": this.$cookie.get('userId')
          }).then(() => {
            this.yuyue = true;
            this.countTime.d = 0;
            this.countTime.h = 0;
            this.countTime.m = 0;
            this.countTime.s = 0;
            this.countTime.ms = 0;
            // this.countTime.time = 0;
            // clearInterval(this.timer);
            clearInterval(this.countTime.time);
            updateSpaceAndCar(carId).then(({data}) => {
              console.log('更新成功', data);
            })
          })
        })
      }).catch(() => {
        return false;
      })
    },
    // 清空租车计时时间
    stopRentalParking0() {
      this.countTime0.d = 0;
      this.countTime0.h = 0;
      this.countTime0.m = 0;
      this.countTime0.s = 0;
      this.countTime0.ms = 0;
      clearInterval(this.countTime0.time);
    },
    // 预约车位开始计时
    receipt() {
      this.countTime.time=setInterval(this.timer,50);
    },
    // 租车时间开始计时
    receipt2() {
      this.countTime0.time=setInterval(this.timer2,50);
    },
    // 车位计时方法
    timer() { // 定义计时函数
      this.countTime.ms=this.countTime.ms+50; // 毫秒
      if(this.countTime.ms>=1000){
        this.countTime.ms=0;
        this.countTime.s=this.countTime.s+1; // 秒
      }
      if(this.countTime.s>=60){
        this.countTime.s=0;
        this.countTime.m=this.countTime.m+1; // 分钟
      }
      if(this.countTime.m>=60){
        this.countTime.m=0;
        this.countTime.h=this.countTime.h+1; // 小时
      }
      this.countTime.str =this.toDub(this.countTime.h)+":"+this.toDub(this.countTime.m)+":"+this.toDub(this.countTime.s)+"" /* +this.toDubms(this.ms)+"毫秒" */;
      // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
      // console.log('小时', this.toDub(this.h));
    },
    // 租车时间计时方法
    timer2() { // 定义计时函数
      this.countTime0.ms=this.countTime0.ms+50; // 毫秒
      if(this.countTime0.ms>=1000){
        this.countTime0.ms=0;
        this.countTime0.s=this.countTime0.s+1; // 秒
      }
      if(this.countTime0.s>=60){
        this.countTime0.s=0;
        this.countTime0.m=this.countTime0.m+1; // 分钟
      }
      if(this.countTime0.m>=60){
        this.countTime0.m=0;
        this.countTime0.h=this.countTime0.h+1; // 小时
      }
      this.countTime0.str =this.toDub(this.countTime0.h)+":"+this.toDub(this.countTime0.m)+":"+this.toDub(this.countTime0.s)+"" /* +this.toDubms(this.ms)+"毫秒" */;
      // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
      // console.log('小时', this.toDub(this.h));
    },
    // 补0操作
    toDub(n) {
      if(n<10){
        return "0"+n;
      }else {
        return ""+n;
      }
    },
    // 显示订单页面地图
    showMap() { // 显示地图
      this.showPopHuan = true;
    },
    // 显示当前订单的信息
    showCarMsg() {
      getOrderList(this.$cookie.get('userId'), 0).then(res => {
        this.startTime = parseInt(res.data.data[0].startTime); // 获取开始租车时间

        // /** 存储车辆形式的轨迹信息，用于在地图中展示轨迹线 */
        this.trajectory = typeof trajectory === 'string' ? JSON.parse(res.data.data[0].trajectory) : [];
        this.orderId = res.data.data[0].id;
        getOrderingData(res.data.data[0].car_id).then(res2 => { // 拿到经纬度转换为地址
          this.orderingCar = res2.data.data[0];
          // 调用将经纬度转换成地址的方法
          AMapLoader.load({
            key: "3ec0f4b64da67a9e6ade01ba12078cf8", // 设置您的key
            version: "2.0",
            plugins: ["AMap.Geocoder"],
            AMapUI: {
              version: "1.1",
              plugins: []
            },
            Loca: {
              version: "2.0"
            }
          })
            .then((AMap) => {
              let geocoder;
              window.AMap.plugin('AMap.Geocoder', function () {
                geocoder = new window.AMap.Geocoder({
                  // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                  // city: '全国'
                })
              })
              // 将经纬度转换成地址
              geocoder.getAddress([res2.data.data[0].longitude, res2.data.data[0].latitude], (status, result) => {
                if (status === 'complete' && result.regeocode) {
                  this.location = result.regeocode.formattedAddress;
                }
              })
            })
        })

        getPackageList(res.data.data[0].packageId).then(res2 => { // 拿到套餐数据
          this.spendPackageTime = res2.data.data[0].secondsCount;
          this.price2 = res2.data.data[0].price;
          this.price = res2.data.data[0].unitPrice;
        })
      })
    },
    // 获取停车位
    getRentalParking() {
      getOrderList(this.$cookie.get('userId'), 0).then(res => {
        // 说明此时还没有预约
        if(res.data.data[0].space === null || res.data.data[0].space === "") {
          getRentalParkingList(this.lnglat[0], this.lnglat[1]).then(res => { // 获取用户订单里面经纬度对应的停车位置
            if(res.data.code === 200) {
              this.parkingList = res.data.data; // 拿到停车位列表
            }
          })
          this.appointCarSpace = true; // 让停车位弹框出现
        }else {
          this.showSpace = true; // 提醒用户已经预约过了
        }
      })
    },
    // 预约具体停车位
    getParkingNum(e) {
      if(confirm('确定有预约该车位吗？')) {
        alert('预约成功');
        getOrderList(this.$cookie.get('userId'),0).then(res2 => { // 预约成功后拿到当前订单
          updateRentalParkingList( // 将停车位状态变为不可预约
            0,
            res2.data.data[0].car_id,
            e.id
          ).then(res => {
            if(res.data.code === 200) {
              this.$store.commit('setParkingStatus', true);
              this.getRentalParking(); // 更新成功后调用获取停车位列表方法
              // this.getTime(); // 预约成功后开启倒计时
              updateSpaceData( // 将车位id更新到订单表中
                e.id,
                this.$cookie.get('userId'),
                0
              ).then(res3 => {
                this.appointCarSpace = false; // 预约成功后将弹框关掉
                this.receipt(); // 预约成功后也需要调用计时方法
              })
              updateCarId(res2.data.data[0].car_id, e.id).then(res3 => { // 将车辆id更新到停车位表中
              })
              this.startAppointTime = formatDateTime(new Date().getTime());
              getSpaceStartTime(this.startAppointTime, this.$cookie.get('userId')).then(res3 => {
                if(this.startAppointTime !== null || this.startAppointTime !== "") {
                  this.yuyue = false; // 预约后将预约停车位变为取消预约停车位
                }
              })
            }
          })
        })
        // 预约成功后将预约时间插入到订单表中
      }
    },
    // 获取停车位置
    getLocation(val) {
      this.location = val[0]; // 还车位置
      this.lnglat = val[2]; // 地址对应的经纬度
    },
    // 结束用车
    getOverTime() {
      getOrderList(this.$cookie.get('userId'), 0).then(res => { // 获取用户当前的订单
        if(res.data.data[0].afterVoucher !== null && res.data.data[0].afterVoucher !== "" && this.fileList.length !== 0) { // 有凭证
          if(res.data.data[0].space === null || res.data.data[0].space === "") { // 如果用户当前没有预约车位
            this.$dialog.alert({ // 弹框确认是否进入订单页面
              message: '请先预约停车位'
            })
          }else {
            if(confirm('确定要结束租车吗？')) {
              // console.log('用户列表数据', JSON.parse(res.data));
              let date = new Date();
              this.overTime = Date.parse(date)/1000; //  结束租车的秒数
              this.$store.commit('setEndTime', this.overTime);
              /** ----------算时间----------- */
              // let packageTime = this.packageList[this.curIndex].secondsCount; // 套餐对应所需要的秒数
              let packageTime = this.spendPackageTime;
              let timeInterval; // 非套餐经历的时间
              let nextDate; // 开始租车的时间+套餐的时间

              // 算租车所经历的时间
              if(packageTime !== 0) { // 选择的是套餐
                nextDate = this.startTime + packageTime;
              }else { // 选择的不是套餐
                timeInterval = this.overTime - this.startTime; // 时间间隔
                nextDate = this.startTime + timeInterval;
              }

              // 判断租车时间是否在套餐时间内，若不是则超时再加单价
              if(packageTime !== 0) { // 套餐
                if(this.overTime <= nextDate) { // 没超时
                  this.money = this.price2; // 最终的价格就是套餐里面的价格
                  this.spentTime = this.overTime - this.startTime;
                  console.log('选择的是套餐，但是没有超时,花了' + (this.spentTime/60).toFixed(2) + '分的时间，花了' + this.money + '元');
                }else { // 超时了
                  let overTimeInterval = this.overTime - this.startTime - packageTime; // 用最终的时间-开始的时间就是 经历的时间
                  this.money = parseFloat(this.price*(Math.ceil(overTimeInterval/60))+this.price2).toFixed(2);
                  this.spentTime = this.overTime - this.startTime;
                  console.log('选择的是套餐，但是超时了，花了' + (this.spentTime/60).toFixed(2) + '分，花了'+this.money+'元');
                }
              }else { // 非套餐
                // 直接算单价
                this.price = parseFloat(this.price*Math.ceil(timeInterval/60)).toFixed(3);
                this.money = parseFloat(this.price.substring(0, this.price.length-1)).toFixed(2);
                this.spentTime = this.overTime - this.startTime;
                console.log('没有选择套餐，一共花了'+(timeInterval/60).toFixed(2)+'分钟，所以花了'+this.money+'元');
              }

              /** --------算距离-------- */
              // 获取租车前的经纬度
              // 获取租车后的经纬度
              // getDistance(113.32046598834417, 23.1187754075446, 113.32046678276254, 23.11877559507548) // 第一个是租前纬度，第二个租前经度，第三个是租后纬度，第四个是租后经度

              // 更新之前将当前订单的id查出来
              getOrderList(
                this.$cookie.get('userId'),
                0
              ).then(res => {
                // 计算停车位花费的时间
                // 如果预约结束时间-预约开始时间 = 30min this.appointment = 0
                // 如果如果预约结束时间-预约开始时间 > 30min，从30min开始每小时收费2元
                // 更新预约停车位结束时间
                this.endAppointTime = formatDateTime(new Date().getTime());
                getOrderList(this.$cookie.get('userId'), 0).then(resList => { // 重新获取开始预约时间
                  this.startAppointTime = res.data.data[0].startAppointTime;
                  // 修改账户余额方法
                  getDeposit({ // 先获取当前用户的余额
                    "id": this.$cookie.get('userId')
                  }).then(({data}) => {
                    // 计算有没有预约费
                    let appointTime = parseInt(Date.parse(this.endAppointTime)) - parseInt(Date.parse(this.startAppointTime));
                    if(appointTime <= 1800000) { // 半小时内
                      this.appointment = 1; // 预约费用
                    }else {
                      this.appointment = Math.ceil(appointTime / 3600000) * 2; // 预约车位费用
                    }

                    // 拿到订单的轨迹
                    let trajectoryDistance = JSON.parse(resList.data.data[0].distance);
                    let trajectoryLnglat;
                    if(resList.data.data[0].trajectory !== "" && resList.data.data[0].trajectory !== null && resList.data.data[0].trajectory !== undefined) {
                      trajectoryLnglat = JSON.parse(resList.data.data[0].trajectory);
                      // let trajectoryDistance = 0;
                      for(let i = 0; i < trajectoryLnglat.length-1; i++) {
                        trajectoryDistance += parseFloat(getDistance(trajectoryLnglat[i][0], trajectoryLnglat[i][1], trajectoryLnglat[i+1][0], trajectoryLnglat[i+1][1]).distanceStr)
                      }
                      if(trajectoryDistance < 10) { // 少于10m按0.2算
                        this.distanceMoney = 0.2;
                      }else {
                        this.distanceMoney = (trajectoryDistance/10 * 0.2).toFixed(2);
                      }
                    }else {
                      trajectoryLnglat = null;
                      this.distanceMoney = 0.2;
                    }

                    // 计算总的价格
                    // console.log('parseFloat(this.money)', parseFloat(this.money));
                    // console.log('this.appointment', this.appointment);
                    // console.log('parseFloat(this.distanceMoney)', parseFloat(this.distanceMoney));
                    this.totalMoney = (parseFloat(this.money) + this.appointment + parseFloat(this.distanceMoney)).toFixed(2);
                    // console.log('this.totalMoney', this.totalMoney);

                    let restMoney = data.data[0].deposit - this.totalMoney;
                    if(restMoney < 0) { // 如果余额不足不能更新结束时间
                      this.$dialog.confirm({
                        message: '请回到钱包余额中充值'
                      }).then(() => {
                      }).catch(() => {
                        return false;
                      })
                    }else { // 余额充足
                      clearInterval(this.countTime.time); // 余额充足则证明可以扣钱，那就可以将预约车位停掉
                      clearInterval(this.countTime0.time); // 余额充足则证明可以扣钱，那就可以将租车计时结束掉
                      getSpaceEndTime(this.endAppointTime, this.$cookie.get('userId')).then(res2 => { // 更新结束预约时间
                        // 预约时间
                        // let appointTime = parseInt(Date.parse(this.endAppointTime)) - parseInt(Date.parse(this.startAppointTime));
                        // if(appointTime <= 1800000) { // 半小时内
                        //   this.appointment = 1; // 预约费用
                        // }else {
                        //   this.appointment = Math.ceil(appointTime / 3600000) * 2; // 预约车位费用
                        // }
                        // // 计算总的价格
                        // this.totalMoney = parseFloat(this.money) + this.appointment;
                        updateEndTime( // 将结束用车时间、订单状态、订单金额更新到订单表中
                          this.overTime,
                          1,
                          this.totalMoney,
                          res.data.data[0].id
                        ).then(({data}) => {
                          updateCarList(1, res.data.data[0].car_id).then(res5 => { // 将车辆可租状态改为1，可租
                            // setTimeout(() => {
                            //   this.$router.push('/msite');
                            // }, 3000);
                          })
                        })
                      })

                      updateDeposit({ // 将算好钱之后的余额更新回数据库中
                        "deposit": restMoney,
                        "id": this.$cookie.get('userId')
                      }).then(({data}) => {
                      })

                      updateCarDistance({ // 更新行程距离到数据库中
                        "distance": trajectoryDistance,
                        "user_id": this.$cookie.get('userId')
                      }).then(({data}) => {
                        // 更细成功后调用获取位置的方法
                      })

                      updateOrderReturnLocation({ // 将还车地址更新到订单表中
                        "returnLocation": `[${this.lnglat}]`,
                        "user_id": this.$cookie.get('userId')
                      })
                      this.isShowDialog = true; // 让对话框显示出来
                      this.stopRentalParking0();
                    }
                  })
                })
              })
            }
          }
        }else {
          this.$dialog.alert({
            message: "请上传凭证"
          })
        }
      })
    },
    // 获取现在时间的半小时后
    getTime() {
      // 获取当前时间的半小时后，先保存当前时间再放到定时器里面
      this.cur30 = new Date(new Date().setMinutes(new Date().getMinutes() + 30));
      this.getCountDown();
    },
    // 倒计时
    getCountDown() {
      const end = this.cur30;
      const now = Date.parse(new Date())
      const msec = end - now
      if(msec<0) return;

      let day = parseInt(msec / 1000 / 60 / 60 / 24)
      let hr = parseInt(msec / 1000 / 60 / 60 % 24)
      let min = parseInt(msec / 1000 / 60 % 60)
      let sec = parseInt(msec / 1000 % 60)
      this.day = day
      this.hr = hr > 9 ? hr : '0' + hr
      this.min = min > 9 ? min : '0' + min
      this.sec = sec > 9 ? sec : '0' + sec
      const that = this
      if(min>=0 && sec>=0){
        // 倒计时结束关闭订单
        if(min === 0 && sec === 0) {
          return
        }
        this.timerInterval = setTimeout(function () {
          that.getCountDown()
        }, 1000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.vehicle-rental-map {
  width: 100%;
  height: 100%;
  #container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .container-map-top{
    width: 100%;
    // height: 230px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    .container-map-top-box {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      border-bottom: 1px solid #333;
      .rentalMap-left {
        width: 50%;
        // background-color: pink;
        display: flex;
        flex-flow: row nowrap;
        img {
          width: 100px;
          height: 100px;
        }
        .msg {
          width: 100%;
          margin-left: 10px;
          margin-top: 10px;
        }
      }
      .rentalMap-right {
        width: 46%;
        // background-color: hotpink;
        border-left: 1px solid #333;
        padding-top: 8px;
        padding-left: 4%;
        box-sizing: border-box;
      }
    }
  }
  .rental-over, .rental-parking, .voucher-box {
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    height: $height;
    line-height: $height;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 10px auto;
    button {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 100px;
      background-color: #ccc;
      // background-color: $color;
      color: #fff;
    }
  }
  // 计时
  .time-count {
    width: 100%;
    height: $height;
    background-color: pink;
    display: flex;
    flex-flow: row nowrap;
    font-size: 18px;
  }

  // 订单详情
  .order-dialog /deep/ {
    .van-dialog__content {
      padding: 10px;
      box-sizing: border-box;
    }
    .dialog-box {
      display: flex;
      flex-flow: column nowrap;
    }
  }

  // 停车位列表
  .parking {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    div {
      width: 40px;
      height: 20px;
      text-align: center;
      font-size: 14px;
      margin-left: 4px;
      button {
        width: 100%;
        height: 100%;
        line-height: 20px;
        border: none;
        background-color: $color;
        border-radius: 4px;
        color: #fff;
      }
    }
  }
  // 如果停车位不可预约则显示
  .parkingStatus {
    background-color: #888 !important;
  }
}
// 预约还车Div
.btn-box {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
// 立即租车
.rental-now-box {
  background-color: $color !important;
}
// 还车地址
.huanche {
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  margin-top: 10px;
  div {
    height: $height;
    &:first-of-type {
      width: 24%;
      line-height: $height;
      background: $color;
      color: #fff;
      border-radius: 10px;
      padding: 0 4px;
      box-sizing: border-box;
    }
    &:last-of-type {
      width: 76%;
      padding-left: 4px;
      box-sizing: border-box;
    }
  }
}
.popup-huan /deep/ {
  width: 100%;
  height: 100%;
  .van-icon {
    font-weight: 700;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
    background-color: $color;
    margin-top: -10px;
  }
  .voucher-dialog {
    margin-top: 10px;
  }
}

// 上传凭证
.voucher-box {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin-top: 10px;
  div {
    width: 50%;
  }
}
</style>